<template>
  <div class="box">
    <div class="mainbox">
      <div class="titlebox">
        <h2>游戏规则：打中地鼠+3秒，打到地雷或倒计时为0，游戏结束!</h2>
        <h1>当前分数是：{{ score }} 分 </h1> <h1>倒计时： <span>{{time}}</span> 秒</h1></div>
      <div class="holebox">
        <div class="hole" v-for="n in holenum" :key="n">
          <img
            :style="{ display: hnum === n &&bomb===false? 'block' : 'none' }"
            class="h"
          src="../assets/3.png"
            alt=""
            @click="hit"
          />
                <img
           :style="{  display: hnum === n &&bomb===true? 'block' : 'none' }"
            class="h"
             @click="hit"
          src="../assets/lei.png"
         
          />

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      score: 0,
      holenum: 9,
      hnum: '',
      addHtimer: null,
      bomb:true,
      lifetime:3000,
       lifetimer:null
    };
  },
  computed:{
    time:function(){
      return this.lifetime*0.001
    } 
  },
  mounted() {
    console.log('mounted');
    this.addH();
    this.overtime()
  },
  destroyed(){
    console.log('destroyed');
  },
  methods: {
    hit() {
      if(this.bomb===true){
          clearInterval(this.lifetimer);
           clearInterval(this.addHtimer);
      alert('游戏结束')
        return    this.$router.push('/end')
      }
      this.hnum = "";
      this.lifetime+=3000
      this.score++;
    },
    addH() {
      clearInterval(this.addHtimer);
      this.addHtimer = setInterval(() => {
         if(this.lifetime===0) return
       if(Math.random()>=0.7){
         this.bomb=true
       } else{
          this.bomb=false
       }
      
        this.hnum = Math.floor(Math.random() * this.holenum + 1);
      }, 1000);
    },
    overtime(){
    clearInterval(this.lifetimer);
    this.lifetimer=setInterval(()=>{
      if( this.lifetime===0){
        clearInterval(this.addHtimer);
        clearInterval(this.lifetimer);

     alert('游戏结束')
   this.$router.push('/end')
      }
     this.lifetime-=1000
    },1000)
    }
  },
};
</script>



<style lang="less"  scoped>
.box {
  
   background-color: green;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
}
.mainbox {
  margin: 0 auto;
  background-color: none;
  width: 60%;
  height: 80%;
  display: flex;
  flex-wrap: wrap;

}
.titlebox {
  border: 1px white solid;
  border-radius: 20px;
  text-align: center;
  width: 100%;
  height: 30%;
  background-color: green;

  h1,h2{
    color: #fff;
    span{
      color: red;
    }
  }

}
.holebox {
  width: 100%;
  height: 70%;

  background-color: none;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  .hole {
    width: 30%;
    height: 30%;
    background-color:rgb(112, 77, 37);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    .h {
      margin: 0 auto;
      display: block;
      margin-top: 5%;
  
      width: 50%;
      height: 80%;
    }
  }
}
</style>